<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--流程类型-->
			<!-- <el-col :span="4" :xs="24">
				<div class="head-container">
					<el-input v-model="deptName" placeholder="请输入类型名称" clearable size="small"
						prefix-icon="el-icon-search" style="margin-bottom: 20px" />
				</div>
				<div class="head-container">
					<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
						:filter-node-method="filterNode" ref="tree" default-expand-all @node-click="handleNodeClick" />
				</div>
				</el-col> -->
			<!--ProcessDefinition list-->
			<el-col :span="24" :xs="24">
				<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
					<el-form-item label="流程名称" prop="name">
						<el-input v-model="queryParams.name" placeholder="请输入流程名称" clearable size="small"
							style="width: 240px" @keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="创建时间">
						<el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd"
							type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>

				<el-table v-loading="loading" :data="processDefinitionList" >
					<el-table-column :label="columns[0].label" align="center" key="key" prop="key"
						v-if="columns[0].visible" />
					<el-table-column :label="columns[1].label" align="center" key="name" prop="name"
						v-if="columns[1].visible" :show-overflow-tooltip="true" />
					<el-table-column :label="columns[2].label" align="center" key="category"
						prop="category" v-if="columns[2].visible"
						:show-overflow-tooltip="true" />
					<el-table-column :label="columns[3].label" align="center" width="170" key="version" v-if="columns[3].visible"
						prop="version" :show-overflow-tooltip="true"/>
					<el-table-column :label="columns[4].label" align="center" prop="diagramResourceName" v-if="columns[4].visible"
						width="160" :show-overflow-tooltip="true">
						<template slot-scope="scope">
							<span>{{ scope.row.diagramResourceName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-caret-right" @click="handleUpdate(scope.row)"
								v-hasPermi="['system:processModel:start']">发起流程</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" @pagination="getList" />
					
			</el-col>
			
		</el-row>
	</div>
</template>

<script>
	import {
		listMyProcess,
	} from "@/api/process/definition.js";
	import {formatDate} from "@/utils/index.js";
	import {
		treeselect
	} from "@/api/system/dept";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";

	export default {
		name: "processDefinition",
		components: {
			Treeselect
		},
		data() {
			return {
				//
				dialogStatus: '',
				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 流程数据
				processDefinitionList: null,
				// 树选项
				deptOptions: undefined,
				// 日期范围
				dateRange: [],
				// 表单参数
				form: {},
				defaultProps: {
					children: "children",
					label: "label"
				},
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					name: undefined,
					modelTypeId: undefined
				},
				// 列信息
				columns: [{
						key: 0,
						label: `流程编号`,
						visible: true
					},
					{
						key: 1,
						label: `流程名称`,
						visible: true
					},
					{
						key: 2,
						label: `流程类型`,
						visible: true
					},
					{
						key: 3,
						label: `版本`,
						visible: true
					},
					{
						key: 4,
						label: `流程模型图`,
						visible: true
					}
				],
			};
		},
		watch: {
			// 根据名称筛选部门树
			deptName(val) {
				this.$refs.tree.filter(val);
			}
		},
		created() {
			this.getList();
			// this.getTreeselect();
			// this.getDicts("sys_normal_disable").then(response => {
			// 	this.statusOptions = response.data;
			// });
		},
		methods: {
			formatDate,
			/** 查询流程列表 */
			getList() {
				this.loading = true;
				listMyProcess(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
					this.processDefinitionList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 查询部门下拉树结构 */
			getTreeselect() {
				treeselect().then(response => {
					this.deptOptions = response.data;
				});
			},
			// 筛选节点
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			// 节点单击事件
			handleNodeClick(data) {
				this.queryParams.deptId = data.id;
				this.getList();
			},
			// 状态修改
			handleStatusChange(row) {
				let text = row.status === "0" ? "发布" : "停用";
				this.$confirm('确认要"' + text + '""' + row.name + '"流程吗?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return changeProcessModelStatus(row.key, row.status);
				}).then(() => {
					this.msgSuccess(text + "成功");
				}).catch(function() {
					row.status = row.status === "0" ? "1" : "0";
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					key: undefined,
					name: undefined,
					description: undefined,
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.page = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.dateRange = [];
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				// this.ids = selection.map(item => item.key);
				this.ids = selection;
				this.single = selection.length != 1;
				this.multiple = !selection.length;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.dialogStatus = 'create';
				this.open = true;
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				// this.getTreeselect();
				let metaInfo = row.metaInfo
				this.form = row;
				this.form.description = JSON.parse(metaInfo).description;
				this.open = true;
				this.dialogStatus = 'update';
				this.title = "修改流程";
			},
			/** 提交按钮 */
			submitForm: function() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						addProcessModel(this.form).then(response => {
							this.msgSuccess(response.msg);
							this.open = false;
							this.getList();
							// this.$router.push({
							// 	path: '/process/edit',query:this.form
							// });
							
						});
					}
				});
			},
			handleProcessEdit:function(row){
				this.form = row
				console.log(this.form)
				this.$router.push({
					path: '/process/edit',query:this.form
				});
			},
			/** 修改流程 */
			updateData: function(){
				this.$refs["form"].validate(valid => {
					if (valid) {
						updateProcessModel(this.form).then(response => {
							this.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const processModelKey = row.processModelKey || this.ids;
				this.$confirm('是否确认删除编号为"' + processModelKey + '"的数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return delProcessModel(processModelKey);
				}).then(() => {
					this.getList();
					this.msgSuccess("删除成功");
				})
			},
			/** 导出按钮操作 */
			handleExport() {
				const queryParams = this.queryParams;
				this.$confirm('是否确认导出所有用户数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return exportUser(queryParams);
				}).then(response => {
					this.download(response.msg);
				})
			},
			/** 导入按钮操作 */
			handleImport() {
				this.upload.title = "用户导入";
				this.upload.open = true;
			},
			/** 下载模板操作 */
			importTemplate() {
				importTemplate().then(response => {
					this.download(response.msg);
				});
			},
			// 文件上传中处理
			handleFileUploadProgress(event, file, fileList) {
				this.upload.isUploading = true;
			},
			// 文件上传成功处理
			handleFileSuccess(response, file, fileList) {
				this.upload.open = false;
				this.upload.isUploading = false;
				this.$refs.upload.clearFiles();
				this.$alert(response.msg, "导入结果", {
					dangerouslyUseHTMLString: true
				});
				this.getList();
			},
			// 提交上传文件
			submitFileForm() {
				this.$refs.upload.submit();
			}
		}
	};
</script>
<style type="text/css">
</style>
